<template>
  <view>
    <view class="bg-color" />
    <view class="main-container">
      <uni-forms :modelValue="userViewData">
        <view class="card">
          <uni-card is-full spacing="0">
            <uni-forms-item name="propertyTitle" required>
              <uni-easyinput
                type="text"
                :inputBorder="true"
                v-model="userViewData.propertyData.propertyTitle"
                placeholder="遗失物品标题"
              />
            </uni-forms-item>
            <uni-forms-item required name="tag">
              <uni-data-checkbox
                mode="tag"
                v-model="userViewData.propertyData.tagId"
                :localdata="userViewData.tagContent"
              ></uni-data-checkbox>
            </uni-forms-item>
            <uni-forms-item name="contactInfo">
              <uni-easyinput
                type="text"
                v-model="userViewData.propertyData.contactInfo"
                placeholder="在这里留下您的联系方式"
              />
            </uni-forms-item>
            <uni-forms-item name="note">
              <uni-easyinput
                type="text"
                v-model="userViewData.propertyData.note"
                placeholder="添加备注信息"
              />
            </uni-forms-item>
          </uni-card>
        </view>
        <view class="card">
          <uni-card is-full spacing="0">
            <uni-file-picker limit="9" auto-upload="false" @select="upload()" />
          </uni-card>
        </view>
        <view class="card">
          <uni-card is-full spacing="0">
            <uni-forms-item name="address">
              <uni-easyinput
                type="text"
                v-model="userViewData.propertyData.address"
                placeholder="请输入丢失该物品的详细地址"
              />
            </uni-forms-item>
            <button @click="submitPropertyData()">Submit</button>
          </uni-card>
        </view>
      </uni-forms>
    </view>
  </view>
</template>

<script>
import { addProperty } from "@/api/property.js";
export default {
  data() {
    return {
      userViewData: {
        propertyData: {
          propertyId: "",
          propertyTitle: "",
          tagId: "",
          contactInfo: "",
          note: "",
          address: "",
          // lost为，表示寻物启事
          lost: 1,
          image: "https://imgsa.baidu.com/forum/w%3D580/sign=fe3f291f3aa85edffa8cfe2b795509d8/cec708fa513d26971be048125bfbb2fb4316d87d.jpg",
        },
        // 先模拟后端接口返回json
        tagContent: [
          { value: 1, text: "证件" },
          { value: 2, text: "服饰" },
          { value: 3, text: "数码" },
          { value: 4, text: "日用品" },
          { value: 5, text: "其他" },
        ],
      },
      tempImages: [],
    };
  },
  methods: {
    select(e) {
      this.tempImages = e.tempImages;
    },
    // 上传图片
    upload() {
      let _this = this;
      uni.uploadFile({
        url: "http://localhost:9090/property",
        filePath: this.tempImages[0].path,
        name: "image",
        file: this.tempImages[0].file,
        success(response) {
          let data = response.data;
          uni.showToast({
            title: data,
            icon: "none",
          });
          // 上传成功之后清空表单
          _this.userViewData = {
            tagValue: 0,
            propertyData: {
              title: "",
              contactInfo: "",
              note: "",
              address: "",
            },
            tagContent: [
              { value: 0, text: "证件" },
              { value: 1, text: "服饰" },
              { value: 2, text: "数码" },
              { value: 3, text: "日用品" },
              { value: 4, text: "其他" },
            ],
          };
        },
        fail() {
          uni.showToast({
            title: "图片上传失败",
            icon: "error",
          });
        },
      });
    },
    submitPropertyData() {
      addProperty(this.userViewData.propertyData)
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log("error", err);
        });
    },
  },
};
</script>

<style lang="scss">
.bg-color {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  z-index: -1;
}
.main-container {
  margin-top: 40rpx;
  padding: 0 22rpx;
  .card {
    margin: 40rpx 0;
  }
  .uni-input-border {
    padding: 0 10px;
    height: 35px;
    width: 100%;
    font-size: 14px;
    color: #666;
    border: 1px #e5e5e5 solid;
    border-radius: 5px;
    box-sizing: border-box;
  }
}
</style>
